<template>
	<view class="goodsdetail" v-if="goodsinfo != ''">
		<view class="banner">
			<swiper class="uni-swiper" :indicator-dots="true" circular="true" :autoplay="true" :interval="3000"
				:duration="1000">
				<swiper-item v-for="(item,index) in goodsinfo.image" :key='index'>
					<view class="swiper-item">
						<image :src="item.path" mode=""></image>
					</view>
				</swiper-item>

			</swiper>
		</view>
		<view class="goodsinfo">
			<view class="name">
				{{goodsinfo.name}}
			</view>
			<view class="content">
				{{goodsinfo.sketch}}
			</view>
			<view class="specs">
				<view class="price">
					<text class="pricenum">￥{{goodsinfo.price}}</text> / {{goodsinfo.unit}}
				</view>
				<view class="num">
					累计售量：{{goodsinfo.total_sales}}
				</view>
			</view>
		</view>
		<view class="detail">
			<view class="title">
				产品详情
			</view>
			<!-- <view class="msg" v-html="goodsinfo.intro">
			</view> -->
			<rich-text class="msg" :nodes="goodsinfo.intro"></rich-text>
		</view>
		<view class="footer">
			<view class="left" @click="toCart">
				<image src="/static/index/cart_k.png" mode=""></image>
				<text>{{num}}</text>
			</view>
			<view class="right">
				<view class="btns">
					<view class="joincart" @click="joinCart">
						加入购物车
					</view>
					<view class="buynow" @click="toPage('/pages/orderfound/index?goods_id='+goodsinfo.id)">
						立即购买
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		GoodsDetail,
		getCartSum
	} from "@/api/api.js"
	import {
		add
	} from "@/api/shop.js"
	export default {
		data() {
			return {
				goodsid: '',
				goodsinfo: '',
				num: ''
			}
		},
		onLoad(e) {
			if (e.id) {
				this.goodsid = e.id
				this.GoodsDetail()
				this.getCartSum()
			}

		},
		methods: {
			parseRichTextToNodes(richTextString) {
				// 创建一个临时 DOM 元素
				let tempElement = document.createElement('div');
				tempElement.innerHTML = richTextString;

				// 递归解析子节点
				function parseNodes(element) {
					let nodes = [];

					element.childNodes.forEach(child => {
						let node = {};

						if (child.nodeType === Node.ELEMENT_NODE) {
							node.name = child.nodeName.toLowerCase();
							node.attrs = {};

							// 解析属性
							for (let attr of child.attributes) {
								node.attrs[attr.name] = attr.value;
							}

							// 解析子节点
							if (child.childNodes.length > 0) {
								node.children = parseNodes(child);
							}
						} else if (child.nodeType === Node.TEXT_NODE) {
							node.type = 'text';
							node.text = child.nodeValue;
						}

						nodes.push(node);
					});

					return nodes;
				}

				return parseNodes(tempElement);
			},
			joinCart() {
				add({
					goods_id: this.goodsid,
					num: 1
				}).then(res => {
					uni.$showMsg(res.msg)
					if (res.code == 0) {
						this.getCartSum()
					}
				})
			},
			getCartSum() {
				getCartSum().then(res => {
					if (res.code == 0) {
						this.num = res.data
					}
				})
			},
			toCart() {
				uni.switchTab({
					url: '/pages/cart/index'
				})
			},
			GoodsDetail() {
				GoodsDetail({
					id: this.goodsid
				}).then(res => {
					if (res.code == 0) {
						this.goodsinfo = res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.uni-swiper {
		height: 350px;

		.swiper-item {
			image {
				width: 100%;
				height: 350px;
			}
		}
	}

	.goodsinfo {
		background: #fff;
		padding: 25rpx;

		.name {
			letter-spacing: 1px;
			font-weight: bold;
			font-size: 17px;
		}

		.content {
			font-size: 14px;
			color: #777;
			margin-top: 10px;
			max-height: 40px;
			line-height: 20px;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		.specs {
			display: flex;
			justify-content: space-between;
			margin-top: 10px;

			.price {
				font-size: 14px;

				.pricenum {
					font-weight: bold;
					color: #FF5A00;
					margin-right: 10rpx;
					font-size: 18px;
				}
			}

			.num {
				background: #efefef;
				padding: 10rpx 30rpx;
				font-size: 14px;
				color: #777;
				border-top-left-radius: 10px;
				border-bottom-left-radius: 10px;
			}
		}
	}

	.detail {
		background-color: #FFFFFF;
		margin-top: 20rpx;
		min-height: 200rpx;
		padding: 0 10px;
		padding-bottom: 130rpx;

		.title {
			text-align: center;
			padding: 30rpx;
			color: #777;
		}

		image {
			width: 92%;
			margin-left: 4%;
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		background: #fff;
		box-shadow: 0 -1px 3px #dddddd;
		max-width: 500px;

		.left {
			width: 30%;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				background: #f00;
				color: #fff;
				border-radius: 50%;
				width: 15px;
				height: 15px;
				display: block;
				text-align: center;
				line-height: 15px;
				font-size: 12px;
				font-weight: bold;
				margin: 10px 0 0 -10px;
				position: relative;
				z-index: 1001;
			}

			image {
				width: 25px;
				height: 25px;
			}
		}

		.right {
			flex: 1;
			display: flex;
			color: #fff;
			text-align: center;
			justify-content: flex-end;
			padding-right: 10px;
			box-sizing: border-box;
			height: 100rpx;

			.btns {
				display: flex;
				width: 90%;
				border-radius: 20px;
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 10rpx;
				overflow: hidden;
			}

			.joincart {
				width: 50%;
				background: #FFB049;
			}

			.buynow {
				width: 50%;
				background: #FF5A00;
			}
		}
	}
</style>